<template>
  <div class="counte">
    <div class="title_bread"><span>回放</span> <span> / Play Back </span></div>
    <div id="playback"></div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useStore } from "vuex";
import rrwebPlayer from "rrweb-player";
import "rrweb-player/dist/style.css";
export default {
  name: "Back",
  setup(props) {
    const store = useStore();
    //回放实例
    const replayer = ref(null);
    onMounted(() => {
      stopRecord();
    });
    // //4.点击回放
    const stopRecord = () => {
      //获取录制的开始时间戳和结束时间戳
      // start_time = events.value[0].timestamp;
      replayer.value = new rrwebPlayer({
        target: document.getElementById("playback"), // 可以自定义 DOM 元素
        props: {
          events: store.state.events,
          speedOption: [1, 2, 5, 10],
        },
      });
    };
    return {};
  },
};
</script>

<style>
.n {
  display: none;
}
</style>
